<template>
  <ych-modal
    :fullscreen="false"
    size="small"
    :title="$t('m.common.button.preview')"
    :visible="visible"
    @cancel="handleCancel">

    <div style="width: 350px;">
      <view-layout-row v-if="tempBodyString" :rows="JSON.parse(tempBodyString)" :height="200"
                       :editable="false" :groupId="groupId"></view-layout-row>
    </div>

    <template slot="footer">
      <a-button key="back" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
    </template>
  </ych-modal>
</template>

<script>

import ViewLayoutRow from "./ViewLayoutRow";

export default {
  name: "ViewTemplatePreview",
  components: {
    ViewLayoutRow
  },
  data() {
    return {
      visible: false,
      tempBodyString: null,
      groupId: "",
    }
  },
  methods: {
    handleCancel() {
      this.visible = false;
    },
    open(tempBodyString) {
      this.tempBodyString = tempBodyString || null
      this.visible = true
    }
  }
}
</script>
